html中定义动画名字和规则,@keyframes

@keyframes

版本：CSS3

关键帧@keyframes at-rule 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。和转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

示例@keyframes slidein {

from {

transform: translateX(0%);

}

to {

transform: translateX(100%);

}

}

JavaScript 可以通过 CSS对象模型接口CSSKeyframesRule来访问@keyframes

要使用关键帧，先创建一个带名称的@keyframes规则，以便后续使用@keyframes规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

您可以按任意顺序列出关键帧百分比；他们将按照其应该发生的顺序来处理。

让关键帧序列生效

如果一个关键帧规则没有指定动画的开始或结束状态(也就是，0%/from和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

重复定义(Duplicate resolution)

如果多个关键帧使用同一个名称，以最后一次定义的为准。